<template>
	<view class="alert-handling">
		<uni-row class="header_row">
			<uni-col :span="6">
				<uni-data-select v-model="selectFrom.type" :localdata="typeRange" @change="change" placeholder="预警类别" :clear="false"></uni-data-select> 
			</uni-col>
			<uni-col :span="6"> 
				<uni-data-select v-model="selectFrom.level" :localdata="levelRange" @change="change" placeholder="预警级别" :clear="false"></uni-data-select> 
			</uni-col>
			<uni-col :span="12"> 
				<uni-datetime-picker v-model="selectFrom.datetimerange" type="datetimerange" rangeSeparator="-"  />
			</uni-col>
		</uni-row>
		<view class="table_container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="100">预警类别</uni-th> 
					<uni-th align="center"  width="100">预警级别</uni-th> 
					<uni-th align="center"  width="100">报警时间</uni-th> 
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td align="center" width="100">{{ item.type }}</uni-td> 
					<uni-td align="center" width="100"> 
						<u-tag :text="item.level" plainFill class="levelTag" :type="getType(item.level)" plain></u-tag>	 
					</uni-td> 
					<uni-td align="center" width="100">{{ item.date }}</uni-td> 
				</uni-tr>
			</uni-table>
			<uni-pagination class="pagination" :current="currentPage" :total="16" title="标题文字" prev-text="前一页" next-text="后一页" />
		</view> 
		<custom-tabBar></custom-tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: 1,
				selectFrom: {},
				typeRange: [
					{ value: "全部", text: "全部" }, 
					{ value: "水位", text: "水位" }, 
					{ value: "雨量", text: "雨量" }, 
					{ value: "流量", text: "流量" }, 
					{ value: "位移", text: "位移" }, 
					{ value: "入侵", text: "入侵" }, 
				],
				levelRange: [
					{ value: "全部", text: "全部" }, 
					{ value: "一级", text: "一级" }, 
					{ value: "二级", text: "二级" }, 
					{ value: "三级", text: "三级" },  
				],
				loading: false,
				tableData: [
					{ type: "水位预警", level: "一级", date: "2024-10-06" },
					{ type: "雨量预警", level: "二级", date: "2024-10-06" },
					{ type: "流量预警", level: "三级", date: "2024-06-15" },
					{ type: "位移预警", level: "一级", date: "2024-10-06" },
					{ type: "入侵预警", level: "二级", date: "2024-06-15" },
					{ type: "水位预警", level: "一级", date: "2024-10-06" },
					{ type: "流量预警", level: "三级", date: "2024-06-15" },
					{ type: "位移预警", level: "一级", date: "2024-10-06" }, 
					{ type: "位移预警", level: "一级", date: "2024-10-06" },
					{ type: "入侵预警", level: "二级", date: "2024-06-15" },
					{ type: "水位预警", level: "一级", date: "2024-10-06" },
					{ type: "雨量预警", level: "二级", date: "2024-06-15" },
					{ type: "流量预警", level: "三级", date: "2024-10-06" },
				],
			}
		},
		methods: {
			getType(level){
				if(level === "一级") return "error";
				if(level === "二级") return "warning";
				if(level === "三级") return "primary";
			},
			change(e) {
				console.log("e:", e);
			},
		}
	}
</script>


<style lang="scss">  
.header_row{
	background-color: #fff; 
	/deep/ .uni-select,/deep/ .uni-date-x--border{
		border: none;
	} 
	/deep/ .uni-select{
		border-right: 1px solid #e5e5e5;
	}
	/deep/ .icon-calendar{
		display: none;
	}
}
.table_container{
	padding: 0.8rem;
	background-color: #fff; 
	.pagination{
		margin-top: 0.8rem;
	}
}
.levelTag{ 
	display: inline-block;
}
</style>